<template>
  <div class="container-pt">
    <van-nav-bar
      fixed
      title="修改用户资料"
      @click-left="$router.back()"
      left-arrow
    />
    <input type="file" hidden ref="fileInput" @change="onChange" />
    <van-cell
      is-link
      title="头像"
      class="avatar"
      @click="chooseAvatar"
      @change="onChange"
    >
      <van-image
        width="30"
        height="30"
        round
        :src="$getUrl(userInfo.icon) || 'https://img01.yzcdn.cn/vant/cat.jpeg'"
      />
    </van-cell>
    <van-cell
      is-link
      :value="userInfo.username"
      title="昵称"
      @click="openPopup('username')"
    ></van-cell>
    <van-cell
      is-link
      :value="userInfo.mobile"
      title="手机号"
      @click="openPopup('mobile')"
    ></van-cell>
    <van-cell
      is-link
      :value="userInfo.sex === 0 ? '男' : '女'"
      title="性别"
      @click="openPopup('sex')"
    ></van-cell>
    <van-cell
      is-link
      :value="userInfo.birthday"
      title="出生年月"
      @click="openPopup('birthday')"
    ></van-cell>
    <van-cell
      is-link
      :label="userInfo.address"
      title="家庭住址"
      @click="openPopup('address')"
    ></van-cell>
    <van-cell
      is-link
      :label="userInfo.notes || '我就是我不一样的烟火'"
      title="个性留言"
      @click="openPopup('notes')"
    ></van-cell>
    <!-- 弹出层 -->
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '80%' }"
      v-if="field === 'icon'"
    >
      <!-- v-if保证每次打开都是新的裁切 -->
      <img-cropper :img="img" v-if="show" @close="confirmEdit" />
    </van-popup>

    <van-popup
      v-else
      v-model="show"
      position="bottom"
      :style="{ height: '50%' }"
      @closed="closePopup"
    >
      <!-- 日期选择器 -->
      <van-datetime-picker
        v-if="field === 'birthday'"
        v-model="currentDate"
        type="date"
        title="请选择出生日期"
        :min-date="minDate"
        @confirm="confirmBirthday"
        @cancel="closePopup"
        :max-date="maxDate"
      />
      <!-- 选择器 -->
      <van-picker
        v-else-if="field === 'sex'"
        title="请选择性别"
        :default-index="sexIndex"
        show-toolbar
        :columns="columns"
        @confirm="confirmSex"
        @cancel="closePopup"
        @change="onChange"
      />
      <!-- 导航栏 -->
      <van-cell-group v-else>
        <van-nav-bar
          :title="title"
          left-text="取消"
          right-text="完成"
          @click-left="closePopup"
          @click-right="onClickRight"
        />
        <!-- 输入框 -->
        <van-field
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          :maxlength="maxlength"
          :placeholder="placeholder"
          show-word-limit
        />
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
import { editUserInfo, getUserInfo } from '@/api/user'
import imgCropper from '@/components/img-cropper.vue'

export default {
  components: {
    imgCropper
  },
  data() {
    return {
      userInfo: {},
      show: false,
      message: '',
      placeholder: '',
      maxlength: 12,
      title: '',
      field: '',
      columns: ['男', '女'],
      sexIndex: 0,
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(1970, 0, 1),
      // 头像的blob数据，通过prop传给子组件
      img: '',
      cropper: {}
    }
  },
  async mounted() {
    const res = await getUserInfo()
    this.userInfo = res.data.userInfo
  },
  methods: {
    // 点击头像一栏触发
    chooseAvatar() {
      // 模拟点击文件选择框
      this.$refs.fileInput.click()
      this.field = 'icon'
    },
    // 监听文件对象改变的方法
    onChange() {
      // 获取文件对象
      const file = this.$refs.fileInput.files[0]
      // 获取blob数据
      const data = window.URL.createObjectURL(file)
      // 数据传递至弹出层中
      this.img = data
      // 显示出弹出层
      this.show = true
      // // file-input  如果选择了同一个文件不会触发change事件
      // // 解决办法就是每次使用完毕，把它的value清空
      this.$refs.fileInput.value = ''
    },

    // 关闭弹出层时触发
    closePopup() {
      this.show = false
      this.title = ''
      this.maxlength = 12
      this.field = ''
      this.placeholder = ''
      this.message = ''
    },
    async onClickRight() {
      this.confirmEdit()
    },
    // 确认修改
    async confirmEdit(value) {
      if (value) {
        this.message = value
      }
      const res = await editUserInfo({
        [this.field]: this.message,
        id: this.userInfo.id
      })
      this.userInfo = res.data
      this.closePopup()
    },
    // 打开弹出层回显数据
    openPopup(field) {
      this.show = true
      if (field === 'username') {
        this.field = 'username'
        this.message = this.userInfo.username
        this.title = '编辑昵称'
        this.maxlength = 12
        this.placeholder = '请输入昵称'
      }
      if (field === 'mobile') {
        this.field = 'mobile'
        this.message = this.userInfo.mobile
        this.maxlength = 11
        this.title = '编辑手机号'
        this.placeholder = '请输入手机号'
      }
      if (field === 'sex') {
        this.field = 'sex'
        this.sexIndex = this.userInfo.sex
      }
      if (field === 'birthday') {
        this.field = 'birthday'
        const birthday = this.userInfo.birthday.split('-')
        birthday[1] = +birthday[1] - 1
        this.currentDate = new Date(...birthday)
      }
      if (field === 'address') {
        this.field = 'address'
        this.title = '编辑地址'
        this.placeholder = '请输入家庭地址'
        this.maxlength = 30
        this.message = this.userInfo.address
      }
      if (field === 'notes') {
        this.field = 'notes'
        this.title = '编辑个性留言'
        this.placeholder = '请输入个性留言'
        this.maxlength = 30
        this.message = this.userInfo.notes
      }
    },
    confirmSex(value, index) {
      console.log(value, index)
      this.message = index
      this.confirmEdit()
    },
    confirmBirthday(value) {
      this.message = new Date(value).toLocaleDateString().replace(/\//g, '-')
      this.confirmEdit()
    }
  }
}
</script>

<style lang="less" scoped>
.van-popup .van-nav-bar {
  background-color: #fff !important;
}
::v-deep .van-popup .van-nav-bar__title {
  color: #000 !important;
}
.van-popup .van-nav-bar__text {
  color: #fff !important;
}
</style>